
import React, { useState, useEffect } from 'react'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import btcIcon from '../../assets/img/icon/btc.png'
import ethIcon from '../../assets/img/icon/eth.png'
import usdtIcon from '../../assets/img/icon/usdt.png'
import cardIcon from '../../assets/img/icon/card.png'
import aliIcon from '../../assets/img/icon/alipay.png'
import './index.scss';
import { Layout, Row, Checkbox, Button } from 'antd';
const { Content } = Layout;

function FeeDetail(props) {
    const [payIndex, setPayIndex] = useState(0)
    const [payList, setPayList] = useState([
        { name: 'BTC', icon: btcIcon },
        { name: 'ETH', icon: ethIcon },
        { name: 'USDT', icon: usdtIcon },
        { name: '银行卡', icon: cardIcon },
        { name: '支付宝', icon: aliIcon }
    ])

    const selectPay = index => {
        setPayIndex(index)
    }

    const payItem = (value, index) => {
        return (
            <div key={index} className={index === payIndex ? "pay-item-active" : "pay-item"} onClick={() => selectPay(index)}>
                <img className="pay-icon" src={value.icon} />{value.name}
            </div>
        )
    }

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <div className="feeDetail main">
                    <div className="feeDetail-title">
                        <h3>电费包信息</h3>
                    </div>
                    <Row className="feeDetail-row">
                        <p>充值金额：</p><span>$1000.00</span>
                    </Row>
                    <Row className="feeDetail-row-white">
                        <p>赠送金额：</p><span>$50.00</span>
                    </Row>
                    <Row className="feeDetail-row">
                        <p>套餐总额：</p><span>$1050.00</span>
                    </Row>
                    <Row className="feeDetail-row-white">
                        <p>支付方式：</p>
                        {
                            payList.map((value, index) => {
                                return payItem(value, index)
                            })
                        }
                    </Row>
                    <Row className="feeDetail-row">
                        <p>合计支付：</p><span>$6470.40.00</span>
                    </Row>
                    <Row className="feeDetail-row-two">
                        <p></p><Checkbox><span>我接受</span><a>《鲸矿用户服务协议》</a></Checkbox>
                    </Row>
                    <Row className="feeDetail-row-white">
                        <Button className="sure-btn" type="primary">确定</Button>
                    </Row>
                    <div className="feeDetail-title">
                        <h3>注意事项</h3>
                    </div>
                    <div className="detail">
                        <h3>法律声明</h3>
                        <p className="detail-text">矿机共享共享服务在以下国家或地区被禁止:巴尔干半岛、白俄罗斯、缅甸、科特迪瓦(象牙海岸)，克里米亚-乌克兰、古巴、刚果民主共和国、伊朗、伊拉克、利比里亚、朝鲜、苏 丹、叙利亚、
                        委内瑞拉、津巴布韦、中国香港和中国大陆。请确认矿机共享服务在您的国家或地区是合法的。否则，您将承担一切法律后果。</p>
                        <h3>无法退款</h3>
                        <p className="detail-text">
                            按照协议规定，一旦订单已付款，将不支持退款。</p>

                        <h3>定价规则</h3>
                        <p className="detail-text">
                            矿机共享套餐的定价会根据数字货币价格等多因素调整。实际购买价格以用户付款时为准，后续即使价格发生变化，鲸矿也不会对这个订单进行差价补偿。
                        </p>
                        <h3>算力波动说明</h3>
                        <p className="detail-text">鲸矿提供的套餐对应的为真实算力，真实算力由于网络、矿机功率等不稳定因素会导致波动，鲸矿不承诺100%稳定运行。</p>
                        <h3>不可控风险声明</h3>
                        <p className="detail-text">鲸矿不对以下不可控风险所造成的损失负责：不能预见、不能避免或不能克服的客观事件，包括自然灾害如洪水、火山爆发、地震、山崩、火灾、被中国政府部门评定为百年不 遇级别以上的风暴和恶劣气候等，政府行为和政府指令，城市级别的电网供电事故，以及社会异常事件如战争、罢工、动乱等。</p>
                        <h3>使用范围声明</h3>
                        <p className="detail-text">用户不得将鲸矿提供的算力用于攻击网络等违法违规行为，否则鲸矿有权强行收回您的算力。</p>
                    </div>
                </div>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default FeeDetail